@import 'my-animate.less';

.intro {
  background-color: #6f5499;
  color: #fff;
  padding: 80px 0;
}

.jumbotron {
  padding: 60px 0;
  color: #fff;
}
.beautify(@bg) {
  background-color: lighten(@bg, 20%);
  -webkit-transition: background .5s, background ease-in-out .5s;
  transition: background .5s, background .5s;
  -webkit-transition: color 1s .5s, color ease-in-out 1s .5s;
  transition: color 1s .5s, color 1s .5s;
  img {
    opacity: 0;
  }
  color: #555;
  &.inview {
    background-color: @bg;
    color: #fff;

    img {
      .myBounceInUp;
      .animated;
    }
  }
}
.components {
  .beautify(#45b7ed);
}
.features {
  .beautify(#ac8);
}
.bootstrap {
  .beautify(#0b9);
}
.intro> .sui-container {
  text-align: center;
}

h1 {
  font-size: 64px;
  line-height: 1.5;
}
h2 {
  font-size: 48px;
  line-height: 1.5;
}
.center {
  text-align: center;
}
.brand-intro .sui-lead {
  font-size: 24px;
  line-height: 2;
}

.btn-lead {
  padding: 20px 80px;
  font-size: 24px;
}

.btn-wrap {
  margin-top: 50px;
}

.details ul {
  margin-top: 50px;
}

.details li {
  font-size: 18px;
  line-height: 2;
}

.bootstrap-logo {
  height: 300px;
}
